<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="public/theme/backend/style/vds.css" />
<link rel="stylesheet" type="text/css" href="public/theme/backend/style/main.css" />
<link rel="stylesheet" type="text/css" href="public/theme/backend/style/fontstylewidget.css">
<link rel="stylesheet" type="text/css" href="public/theme/backend/style/datetimepicker.css"/>
<script type="text/javascript" src="public/theme/backend/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="public/theme/backend/js/fontstylewidget.js"></script>
<script type="text/javascript" src="public/theme/backend/js/vds.js"></script>
<script type="text/javascript">
$(function(){
  //切换对应广告类型
  $('input[name="type"]').change(function(){
    var checked = $('input[name="type"]:checked').val();
    $('tr.type-tr').addClass('hide').find('span.vds-warning').remove();
    $('tr#type-'+checked).removeClass('hide');
  });
  //切换上传还是URL
  $('dl.upsw dt a').click(function(){
    $(this).siblings().removeClass('cur').parent().next('dd').children('div').addClass('hide');
    $(this).addClass('cur').parent().next('dd').find('div').eq($(this).index()).removeClass('hide');
  });
  //设置文字广告样式
  $('#text-color-widget').cxColor().on('change', function(){$(this).data('style', 'c:'+this.value);});
  $('#text-size-widget').vwFontSize();
  $('#text-bold-widget').vwFontFace('b');
  $('#text-underline-widget').vwFontFace('u');
  $('#text-italic-widget').vwFontFace('i');
  //设置广告日期
  $('#start_date').datetimepicker({
    format:'Y-m-d',
    formatDate: 'Y-m-d',
    allowBlank:true,
    onShow:function(ct){
      this.setOptions({maxDate:$('#end_date').val()? $('#end_date').val():false});
    },
    timepicker:false,
  });
  $('#end_date').datetimepicker({
    format:'Y-m-d',
    formatDate:'Y-m-d',
    allowBlank:true,
    onShow:function(ct){
      this.setOptions({minDate:$('#start_date').val()? $('#start_date').val():false});
    },
    timepicker:false
  });
});

function clearDateSelect(id){$('#'+id).val('');}

//提交表单
function submitForm(){
  var type = $('input[name="type"]:checked');
	
  $('#name').vdsChecker({required:true, maxlength:100});
  $('input[name="type"]').last().parent().vdsChecker({checked:true}, {checked:'请选择一个广告类型'}, {checked:typeof(type.val()) != 'undefined'});
  $('#seq').vdsChecker({seq:true}, {seq:'无效的显示顺序！只能填写 0 到 99 的整数！'}, {seq: /^([1-9]\d|\d)$/.test($('#seq').val())});
	
  switch(type.val()){
    case 'image':
      if($('#advimg div').eq(0).hasClass('hide')){
        $('#advimg div').eq(0).find('input').next('span.vds-warning').remove();
        $('#advimg div').eq(1).find('input').vdsChecker({required:true});
      }else{
        $('#advimg div').eq(1).find('input').next('span.vds-warning').remove();
        $('#advimg div').eq(0).find('input').vdsChecker({required:true}, {required:'必须选择上传的文件'});
      }
      $('#image-w').vdsChecker({nonegint:true, maxlength:4}, {maxlength:'宽度不能超过4位数'});
      $('#image-h').vdsChecker({nonegint:true, maxlength:4}, {maxlength:'高度不能超过4位数'});
      $('#image-link').vdsChecker({required:true});
    break;
    case 'flash':
      if($('#advfla div').eq(0).hasClass('hide')){
        $('#advfla div').eq(0).find('input').next('span.vds-warning').remove();
        $('#advfla div').eq(1).find('input').vdsChecker({required:true});
      }else{
        $('#advfla div').eq(1).find('input').next('span.vds-warning').remove();
        $('#advfla div').eq(0).find('input').vdsChecker({required:true}, {required:'必须选择上传的文件'});
      }
      $('#flash-w').vdsChecker({nonegint:true, maxlength:4}, {maxlength:'宽度不能超过4位数'});
      $('#flash-h').vdsChecker({nonegint:true, maxlength:4}, {maxlength:'高度不能超过4位数'});
    break;
    case 'text':
      $('#text-content').vdsChecker({required:true});
      $('#text-link').vdsChecker({required:true});
      var tstyle = '';
      $('input.fwdt').each(function(i, e){
        if(typeof($(e).data('style')) != 'undefined') tstyle += $(e).data('style')+',';
      });
      $('#text-style').val(tstyle);
    break;
    case 'code':
      $('#code-content').vdsChecker({required:true});
    break;
  }
  $('form').vdsSubmit();
}
</script>
</head>
<body>
<{if $_GET['a'] == 'add'}>
<div class="content">
  <div class="loc">
    <h2><i class="icon"></i>添加新广告</h2>
  </div>
  <form method="post" enctype="multipart/form-data" action="<{url m=$MOD c='adv' a='add' step='submit'}>">
    <div class="box">
      <div class="module">
        <table class="dataform">
          <tr>
            <th width="110">广告名称</th>
            <td><input title="广告名称" class="w300 txt" name="name" id="name" type="text" />
              <p class="c999 mt10">注意：广告名称仅用于识别区分不同广告条目，并不在广告中显示</p></td>
          </tr>
          <tr>
            <th>广告位</th>
            <td><select id="position_id" name="position_id" class="slt">
                <option value="0">选择广告位置</option>
                <option disabled="disabled">------------------------------</option>
                <{foreach $position_list as $v}> <option <{if $position_id == $v.id}>selected="selected"<{/if}> value="<{$v.id}>"><{$v.name}> (<{if !empty($v.width)}><{$v.width}><{else}>不限<{/if}>*<{if !empty($v.height)}><{$v.height}><{else}>不限<{/if}>)
                
                </option>
                <{/foreach}>
              </select>
            </td>
          </tr>
          <tr>
            <th>广告类型</th>
            <td>
              <div class="pad10">
                <label class="mr10"><input type="radio" name="type" value="image" /><font class="ml5">图片</font></label>
                <label class="mr10"><input type="radio" name="type" value="flash" /><font class="ml5">Flash</font></label>
                <label class="mr10"><input type="radio" name="type" value="text" /><font class="ml5">文字</font></label>
                <label><input type="radio" name="type" value="code" /><font class="ml5">代码</font></label>
              </div>
            </td>
          </tr>
          <!-- 对应类别开始 -->
          <{include file='backend/adv/type_image.html'}>
          <{include file='backend/adv/type_flash.html'}>
          <{include file='backend/adv/type_text.html'}>
          <!-- 对应类别结束 -->
          <tr id="type-code" class="type-tr hide">
            <th>广告代码</th>
            <td><textarea title="广告代码" id="code-content" class="txtarea" name="code_params[content]" cols="80" rows="6"></textarea></td>
          </tr>
          <tr>
            <th><label for="start_date">起始日期</label></th>
            <td>
              <input title="起始日期" value="" class="date w150 txt" name="start_date" id="start_date" type="text" />
              <button class="cbtn btn ml5" type="button" onclick="clearDateSelect('start_date')">清除</button>
              <p class="c999 mt10">设置广告生效日期，格式为"yyyy-mm-dd"，留空为不限制起始日期</p>
            </td>
          </tr>
          <tr>
            <th><label for="end_date">结束日期</label></th>
            <td>
              <input title="结束日期" class="date w150 txt" name="end_date" id="end_date" type="text" />
              <button class="cbtn btn ml5" type="button" onclick="clearDateSelect('end_date')">清除</button>
              <p class="c999 mt10">设置广告结束日期，格式为"yyyy-mm-dd"，留空为不限制结束日期</p>
            </td>
          </tr>
          <tr>
            <th><label for="seq">显示顺序</label></th>
            <td><input id="seq" class="w50 txt" name="seq" type="text" value="99" /></td>
          </tr>
          <tr>
            <th>状态</th>
            <td>
              <div class="pad5">
                <label class="mr10 green">
                <input type="radio" name="status" value="1" checked="checked" />
                启用</label>
                <label class="red">
                <input type="radio" name="status" value="0" />
                关闭</label>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="submitbtn">
        <button type="button" class="ubtn btn" onclick="submitForm()">保存并提交</button>
        <button type="reset" class="fbtn btn">重置表单</button>
      </div>
    </div>
  </form>
</div>
<{else}>
<div class="content">
  <div class="loc"><h2><i class="icon"></i>编辑广告:<font class="ml5">[<{$rs.adv_id}>]</font></h2></div>
  <form method="post" enctype="multipart/form-data" action="<{url m=$MOD c='adv' a='edit' id=$rs.adv_id step='submit'}>">
    <div class="box">
      <div class="module">
        <table class="dataform">
          <tr>
            <th width="110">广告名称</th>
            <td><input title="广告名称" class="w300 txt" name="name" id="name" type="text" value="<{$rs.name}>" /><p class="c999 mt10">注意：广告名称仅用于识别区分不同广告条目，并不在广告中显示</p></td>
          </tr>
          <tr>
            <th>广告位</th>
            <td>
              <select id="position_id" name="position_id" class="slt">
                <option value="0">选择广告位置</option>
                <option disabled="disabled">------------------------------</option>
                <{foreach $position_list as $v}><option value="<{$v.id}>" <{if $rs.position_id == $v.id}>selected="selected"<{/if}>><{$v.name}> (<{if !empty($v.width)}><{$v.width}><{else}>不限<{/if}>*<{if !empty($v.height)}><{$v.height}><{else}>不限<{/if}>)
                
                </option>
                <{/foreach}>
              </select>
            </td>
          </tr>
          <tr>
            <th>广告类型</th>
            <td>
              <div class="pad10">
                <label class="mr10"><input type="radio" name="type" value="image" <{if $rs.type == 'image'}>checked="checked"<{/if}> /><font class="ml5">图片</font></label>
                <label class="mr10"><input type="radio" name="type" value="flash" <{if $rs.type == 'flash'}>checked="checked"<{/if}> /><font class="ml5">Flash</font></label>
                <label class="mr10"><input type="radio" name="type" value="text" <{if $rs.type == 'text'}>checked="checked"<{/if}> /><font class="ml5">文字</font></label>
                <label><input type="radio" name="type" value="code" <{if $rs.type == 'code'}>checked="checked"<{/if}> /><font class="ml5">代码</font></label>
              </div>
            </td>
          </tr>
          <!-- 对应类别开始 -->
          <{if $rs.type == 'image'}>
          <tr id="type-image" class="type-tr">
            <th>图片广告</th>
            <td>
              <dl class="upsw pad5">
                <dt class="pad5"><a class="ml5 mr5">上传文件</a><a class="cur ml10">输入URL</a></dt>
                <dd class="mt5 pad5" id="advimg">
                  <div class="hide">
                    <label>
                    <input name="image_file" type="file" />
                    </label>
                    <p class="c999 mt10">仅允许上传 "png"、"jpg"、"jpeg"、"gif" 类型的图片</p>
                  </div>
                  <div>
                    <label><input title="URL" name="image_params[src]" class="w500 txt" type="text" value="<{$rs.params.src}>" /></label>
                    <a title="查看图片" class="picflag icon ml5" onclick="$(this).vdsPopMedia({src:'<{$rs.params.src}>'})"></a>
		  </div>
                </dd>
              </dl>
              <div class="mt5 pad5">
                <label class="mr10"><font class="c666 mr5">图片宽度:</font><input title="宽度" id="image-w" class="w100 txt" name="image_params[width]" type="text" value="<{$rs.params.width}>" /><font class="c999 ml5">像素(px)</font></label>
                <label><font class="c666 mr5">图片高度:</font><input title="高度" id="image-h" class="w100 txt" name="image_params[height]" type="text" value="<{$rs.params.height}>" /><font class="c999 ml5">像素(px)</font></label>
                <p class="c999 mt10">(选填) 图片在浏览器中的宽度和高度，如果留空或为0则表示不限制</p>
              </div>
              <div class="mt5 pad5">
                <label><font class="c666 mr5">图片标题:</font><input title="标题" class="w300 txt" name="image_params[title]" type="text" value="<{$rs.params.title}>" /></label>
                <p class="c999 mt10">(选填) 鼠标悬停时图片广告显示的文字信息</p>
              </div>
              <div class="mt5 pad5">
                <label><font class="c666 mr5">图片链接:</font><input title="链接" class="w400 txt" id="image-link" name="image_params[link]" type="text" value="<{$rs.params.link}>" /></label>
                <p class="c999 mt10">(*必填) 点击图片广告后页面跳转的链接地址，站外链接须以"http://"或"https://"开头</p>
              </div>
            </td>
          </tr>
          <{else}>
          <{include file='backend/adv/type_image.html'}>
          <{/if}>
          <{if $rs.type == 'flash'}>
          <tr id="type-flash" class="type-tr">
            <th>Flash 广告</th>
            <td>
              <dl class="upsw pad5">
                <dt class="pad5"><a class="ml5 mr5">上传文件</a><a class="cur ml10">输入URL</a></dt>
                <dd class="mt5 pad5">
                  <div class="hide">
                    <label><input name="flash_file" type="file" /></label>
                    <p class="c999 mt10">仅允许上传 "swf"、"flv" 格式的Flash文件</p>
                  </div>
                  <div>
                    <label><input title="URL" name="flash_params[src]" class="w500 txt" type="text" value="<{$rs.params.src}>" /></label>
                    <a title="查看Flash" class="flaflag icon ml5" onclick="$(this).vdsPopMedia({src:'<{$rs.params.src}>'})"></a> </div>
                </dd>
              </dl>
              <div class="mt5 pad5">
                <label class="mr10"><font class="c666 mr5">Flash 宽度:</font><input title="宽度" id="flash-w" class="w100 txt" name="flash_params[width]" type="text" value="<{$rs.params.width}>" /><font class="c999 ml5">像素(px)</font></label>
                <label><font class="c666 mr5">Flash 高度:</font><input title="高度" id="flash-h" class="w100 txt" name="flash_params[height]" type="text" value="<{$rs.params.height}>" /><font class="c999 ml5">像素(px)</font></label>
                <p class="c999 mt10">(选填) Flash在浏览器中的宽度和高度，如果留空或为0则表示不限制</p>
              </div>
            </td>
          </tr>
          <{else}>
          <{include file='backend/adv/type_flash.html'}>
          <{/if}>
          <{if $rs.type == 'text'}>
          <tr id="type-text" class="type-tr">
            <th>文字广告</th>
            <td>
	      <div class="pad5">
                <label><font class="c666 mr5">文字内容:</font>
                <input title="文字内容" id="text-content" class="w400 txt" name="text_params[content]" type="text" value="<{$rs.params.content}>" />
                </label>
                <p class="c999 mt10">(*必填) 在浏览器中显示的文字广告内容</p>
              </div>
              <div class="pad5">
                <font class="c666 mr5">文字样式:</font>
                <{if $rs.params.style.c}>
		<span class="mr5"><input title="颜色" type="text" data-style="c:<{$rs.params.style.c}>" class="fwdt widget-color" id="text-color-widget" readonly="readonly" value="<{$rs.params.style.c}>" /></span>
		<{else}>
		<span class="mr5"><input title="颜色" type="text" data-style="c:0" class="fwdt widget-color" id="text-color-widget" readonly="readonly" value="#333333" /></span>
		<{/if}>
                <{if $rs.params.style.s}>
		<span class="mr5"><input title="字体大小" type="text" data-style="s:<{$rs.params.style.s}>" class="fwdt widget-size c666" id="text-size-widget" readonly="readonly" value="<{$rs.params.style.s}>" /></span>
		<{else}>
		<span class="mr5"><input title="字体大小" type="text" data-style="s:0" class="fwdt widget-size c666" id="text-size-widget" readonly="readonly" value="大小" /></span>
		<{/if}>
                <{if $rs.params.style.b}>
		<span class="mr5"><input title="加粗" type="text" data-style="b:1" class="fwdt widget-face bold checked" id="text-bold-widget" readonly="readonly" value="B" /></span>
		<{else}>
		<span class="mr5"><input title="加粗" type="text" data-style="b:0" class="fwdt widget-face bold" id="text-bold-widget" readonly="readonly" value="B" /></span>
		<{/if}>
                <{if $rs.params.style.u}>
		<span class="mr5"><input title="下划线" type="text" data-style="u:1" class="fwdt widget-face underline checked" id="text-underline-widget" readonly="readonly" value="U" /></span>
		<{else}>
		<span class="mr5"><input title="下划线" type="text" data-style="u:0" class="fwdt widget-face underline" id="text-underline-widget" readonly="readonly" value="U" /></span>                <{/if}>
                <{if $rs.params.style.i != 0}>
		<span><input title="斜体" type="text" data-style="i:1" class="fwdt widget-face italic checked" id="text-italic-widget" readonly="readonly" value="I" /></span>
		<{else}>
		<span><input title="斜体" type="text" data-style="i:0" class="fwdt widget-face italic" id="text-italic-widget" readonly="readonly" value="I" /></span>
		<{/if}>
                <input type="hidden" name="text_params[style]" id="text-style" />
              </div>
              <div class="mt5 pad5">
                <label><font class="c666 mr5">文字链接:</font><input title="文字链接" id="text-link" class="w400 txt" name="text_params[link]" type="text" value="<{$rs.params.link}>" /></label>
                <p class="c999 mt10">(*必填) 点击文字广告后跳转的URL，站外链接须以"http://"或"https://"开头</p>
              </div>
	    </td>
          </tr>
          <{else}>
          <{include file='backend/adv/type_text.html'}>
          <{/if}>
          <{if $rs.type == 'code'}>
          <tr id="type-code" class="type-tr">
            <th>广告代码</th>
            <td><label><textarea title="广告代码" id="code-content" class="txtarea" name="code_params[content]" cols="80" rows="6"><{$rs.codes}></textarea></label></td>
          </tr>
          <{else}>
          <tr id="type-code" class="type-tr hide">
            <th>广告代码</th>
            <td><label><textarea title="广告代码" id="code-content" class="txtarea" name="code_params[content]" cols="80" rows="6"></textarea></label></td>
          </tr>
          <{/if}>
          <!-- 对应类别结束 -->
          <tr>
            <th><label for="start_date">起始日期</label></th>
            <td>
              <input title="起始日期" class="date w150 txt" name="start_date" id="start_date" type="text" <{if !empty($rs.start_date)}>value="<{date('Y-m-d', $rs.start_date)}>"<{/if}> />
              <button class="cbtn btn ml5" type="button" onclick="clearDateSelect('start_date')">清除</button>
              <p class="c999 mt10">设置广告生效日期，格式为"yyyy-mm-dd"，留空为不限制起始日期</p>
            </td>
          </tr>
          <tr>
            <th><label for="end_date">结束日期</label></th>
            <td>
              <input title="结束日期" class="date w150 txt" name="end_date" id="end_date" type="text" <{if !empty($rs.end_date)}>value="<{date('Y-m-d', $rs.end_date)}>"<{/if}> />
              <button class="cbtn btn ml5" type="button" onclick="clearDateSelect('end_date')">清除</button>
              <p class="c999 mt10">设置广告结束日期，格式为"yyyy-mm-dd"，留空为不限制结束日期</p>
            </td>
          </tr>
          <tr>
            <th><label for="seq">显示顺序</label></th>
            <td><input id="seq" class="w50 txt" name="seq" type="text" value="<{$rs.seq}>" /></td>
          </tr>
          <tr>
            <th>状态</th>
            <td>
             <div class="pad5">
                <label class="mr10 green"><input type="radio" name="status" value="1" <{if $rs.status == 1}>checked="checked"<{/if}> /> 启用</label>
                <label class="red"><input type="radio" name="status" value="0" <{if $rs.status == 0}>checked="checked"<{/if}> /> 关闭</label>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="submitbtn">
        <button type="button" class="ubtn btn" onclick="submitForm()">保存并更新</button>
        <button type="reset" class="fbtn btn">重置表单</button>
      </div>
    </div>
  </form>
</div>
<{/if}>
<script type="text/javascript" src="public/theme/backend/js/datetimepicker.js"></script>
</body>
</html>